<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!-- jQuery  -->
   <script type="text/javascript" src="/plugins/jquery/jquery-3.6.0.min.js"></script>

<!-- layui  -->
<link rel="stylesheet" href="/plugins/layui/2.7.6/css/layui.css" media="all" />
<script src="/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

</head>

<body>
	<form class="layui-form" id="id_form" method="post" action="/storage/stockope/importBatch">
		<div class="layui-form-item">
			<div class="layui-col-md5">
				<label class="layui-form-label">上传EXCEL</label>
				<div class="layui-input-block">
					<input type="text" name="link" readonly="readonly" placeholder="尚未选择文件，请点击此处选择" class="layui-input" lay-verify="required">
					<script>
					layui.use(['upload','table'], function(){
						var dom = $('input[name="link"]');
						var indexOfLoading;
						layui.upload.render({
							elem: dom,
							accept: 'file',
							acceptMime: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
							ext: 'xlsx',
							url: '/logstics/fbabox/uploadAndReadExcelBatchImport?shipmentId='+"[[${shipmentId}]]",
							multiple: false,
							progress: function(n, elem){
								dom.val(n + '%');
								indexOfLoading = layer.load(1, {
									shade: [0.5,'#000000'] //0.1透明度的白色背景
								});
							},
							done: function(res){
								layer.close(indexOfLoading);
								if (res.code == 0) {
									let cols = [ [
										{align: 'center',field: 'serial', title: '操作', width: 100 ,fixed: 'left'}
										,{align: 'center',field: 'commodityCode', title: '商品编码', width: 100,fixed: 'left'}
										,{align: 'center',field: 'name', title: '商品名称', width: 200,fixed: 'left'}
										,{align: 'center',field: 'sku', title: 'SKU', width: 110 ,fixed: 'left'}
										,{align: 'center',field: 'asin', title: 'ASIN', width: 110 ,fixed: 'left'}
										,{align: 'center',field: 'fnsku', title: 'FNSKU', width: 110 ,fixed: 'left'}
										,{align: 'center',field: 'numPlanDeliver', title: '计划发货数量', width: 100 ,fixed: 'left'}
										,{align: 'center',field: 'numRealityDeliver', title: '实际发货数量', width: 100 ,fixed: 'left'}
										,{align: 'center',field: 'boxList', title: '数据集合', width: 100,hide: true}
									]]
									//根据coleSize编辑出多少个箱子
									for (let i = 0; i < res.data.colsSize; i++) {
										let  ss = {
											"align": "center",
											"field": "numRealityDeliver"+(i+1),
											"title": "箱子"+(i+1),
											"width": 95,
											// "edit": 'text',
										}
										cols[0].push(ss);
									}
									for (let i = 0; i < res.data.rows.length; i++) {
										for (let j = 0; j < res.data.rows[i].boxList.length; j++) {
											let numRe = 'numRealityDeliver'+(j+1)
											res.data.rows[i][numRe] = res.data.rows[i].boxList[j]==0?"":res.data.rows[i].boxList[j]
										}
									}

									layer.msg('解析成功');
									window.importTable = layui.table.render({
										elem: '#mjdhtable',
											 page: false
											, even: true
											, limit: 10000
											, totalRow: false
											, toolbar: '#zjtoolbar'
											, defaultToolbar: [{title: '列设置', layEvent: 'fieldSet', icon: 'layui-icon-set'}]
											, height: '550',
										cols: cols,
										data: res.data.rows

									});
									$('.detailsName').text("海外头程装箱清单"+"("+ res.data.shipmentId +")");

								} else{//如果上传失败
									return layer.msg('上传失败');
								}
							}
						});
					});
					</script>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-col-md1 layui-col-md-offset11">
				<div class="layui-btn-container">
					<button type="button" class="layui-btn layui-btn-normal dhicon" onclick="ajaxGet()">下载装箱模板</button>
					<button type="button" class="layui-btn layui-btn-normal dhicon" lay-submit lay-filter="formSubmit">保存</button>
				</div>
			</div>
		</div>

		<div style="width: 100%;height: 10px;background: #f6f6f6;"></div>
<!--		<div style="padding: 16px;display: flex;justify-content: space-between;">-->
<!--			<div  style="font-weight: 700;font-size: 18px;">海外头程装箱清单</div>-->
<!--			<table class="layui-hide" id="id_table_merchant_goods"></table>-->
<!--		</div>-->
		<table class="layui-hide" id="mjdhtable" lay-filter="mjtable"></table>
		<script type="text/html" id="zjtoolbar">
			<div style="padding: 16px;display: flex;justify-content: space-between;">
				<div  style="font-weight: 700;font-size: 18px;" class="detailsName">海外头程装箱清单</div>
			</div>
		</script>

	</div>
</form>
<script>
$(function () {
	layui.use(['form'], function(){
		var form = layui.form;
		
		// 表单提交，共用同一个
		form.on('submit(formSubmit)', function(data){
			var formData = $('#id_form').serialize();
			formData = formData + "&detailArr=" + JSON.stringify(layui.table.getData('mjdhtable'));
			var indexOfLoading = layer.load(1, {
				shade: [0.5,'#000000'] //0.1透明度的白色背景
			});
			$.post('/logstics/fbabox/inbound', {infoItems:JSON.stringify(layui.table.getData('mjdhtable')),shipmentId:"[[${shipmentId}]]"}, function(res){
				if (res.code == 0) {
					layer.msg(res.msg);
					setTimeout(function(){
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index)
					}, 2000);
				} else {
					layer.close(indexOfLoading);
					layer.msg(res.msg);
				}
			});
			return false;
		});
	});
});
function ajaxGet() {
	$.ajax({
		url: '/logstics/fbabox/exportInbound?codeBox='+"[[${codeBox}]]&codeShipment=" +"[[${codeShipment}]]",
		type: 'GET',
		dataType: 'json',

		success: function (result) {
			if (result.code == 0) {
				window.location.href = "[[@{/}]]" + "common/download?fileName=" + encodeURIComponent(result.msg) + "&delete=" + true;
				parent.$('.page-loading').hide();//页面进行了跳转刷新，需要手动关闭页面的加载动画
			} else {
				$.modal.alertError(result.msg);
			}
		}
	});
}
</script>
</body>

</html>